// pause.js
import { settings } from '../checkpoints/checkpoint_one'
import { playBackgroundMusic, pauseBackgroundMusic,switchHomeBackgroundMusic } from '../component/music';
import { CanvasButton } from '../component/custombutton'
export class Pause {
    constructor(canvas, width, height, reStartCallback ,continueCallback, backHome) {
        this.canvas = canvas;
        this.context = this.canvas.getContext('2d');
        this.width = width;
        this.height = height;
        this.reStartCallback = reStartCallback;
        this.continueCallback = continueCallback;
        this.backHome = backHome;

        this.percentage = 8 / 10;

        this.modelWidth = this.width * this.percentage;
        this.modelHeight = this.height / 2;
        this.modelX = this.width / 10;
        this.modelY = this.height / 4;

        this.size_1 = this.modelWidth * (1 - this.percentage) / 2;

        this.button = [];

        this.isAnimating = true;
        
        this.iconSize = this.width * (1 - this.percentage) / 3;

    }

    drawPopup() {
      this.onLoadImage(() => {
            this.drawModal();
            this.drawButton();
      })
  }

    drawModal() {
        this.context.drawImage(this.background_image, this.modelX, this.modelY, this.modelWidth, this.modelHeight);
       
        this.context.font = `${this.size_1}px Arial`;
        this.context.fillStyle = 'black';
        this.context.textAlign = 'center';
        this.context.fillText('暂停', this.width / 2, this.modelY + this.size_1);
        
        this.context.font = `${this.size_1 * 2 / 3}px Arial`;
        this.context.fillText('音效', this.width / 2, this.modelY + this.size_1 * 2 + this.iconSize * 2 / 3);
        this.context.fillText('音乐', this.width / 2, this.modelY + this.size_1 * 4 + this.iconSize * 2 / 3);

        this.context.drawImage(this.force_icon, this.width / 4, this.modelY + this.size_1 * 2, this.iconSize, this.iconSize);
        this.context.drawImage(this.music_icon, this.width / 4, this.modelY + this.size_1 * 4, this.iconSize, this.iconSize);
    }

    onLoadImage(callback) {
      let loadedCount = 0;
      const totalImages = 5;

      this.background_image = wx.createImage();
      this.background_image.src = 'https://gitee.com/z-l-ya/game-image/raw/master/images/background/background_3.png';
      this.background_image.onload = () => {
        loadedCount++;
        checkIfAllLoaded();
      };

      this.force_icon = wx.createImage();
      this.force_icon.src = 'https://gitee.com/z-l-ya/game-image/raw/master/images/icons/force.png';
      this.force_icon.onload = () => {
          loadedCount++;
          checkIfAllLoaded();
      };

      this.music_icon = wx.createImage();
      this.music_icon.src = 'https://gitee.com/z-l-ya/game-image/raw/master/images/icons/music.png';
      this.music_icon.onload = () => {
          loadedCount++;
          checkIfAllLoaded();
      };

        this.open_icon = wx.createImage();
        this.open_icon.src = 'https://gitee.com/z-l-ya/game-image/raw/master/images/icons/open.png';
        this.open_icon.onload = () => {
          loadedCount++;
          checkIfAllLoaded();
      };

        this.off_icon = wx.createImage();
        this.off_icon.src = 'https://gitee.com/z-l-ya/game-image/raw/master/images/icons/off.png';
        this.off_icon.onload = () => {
          loadedCount++;
          checkIfAllLoaded();
      };


      const checkIfAllLoaded = () => {
        if (loadedCount === totalImages && callback) {
          callback();
        }
      };
    }

    drawButton() {
        let _this = this;
        let openforce = {
            type: "image",
            image: "https://gitee.com/z-l-ya/game-image/raw/master/images/icons/open.png",
            style: {
                backgroundColor: 'transparent',
                left: this.width * 2 / 3,
                top: this.modelY + this.size_1 * 2,
                width: this.iconSize * 2,
                height: this.iconSize
            },
            success(button) {
                _this.button.push(button);
                button.drawButton(_this.context); // 绘制按钮
                button.onTap((res) => {
                    button.destroy();
                    settings.FORCE_OPEN = false;
                    new CanvasButton(closeforce);
                })
            },
        };
        let closeforce = {
            type: "image",
            image: "https://gitee.com/z-l-ya/game-image/raw/master/images/icons/off.png",
            style: {
                backgroundColor: 'transparent',
                left: this.width * 2 / 3,
                top: this.modelY + this.size_1 * 2,
                width: this.iconSize * 2,
                height: this.iconSize
            },
            success(button) {
              _this.button.push(button);
              button.drawButton(_this.context); // 绘制按钮
              button.onTap((res) => {
                  button.destroy();
                  settings.FORCE_OPEN = true;
                  new CanvasButton(openforce);
              })
          },
        };
        if(settings.FORCE_OPEN === false) {
          new CanvasButton(closeforce);
        } else {
          new CanvasButton(openforce);
        }
        let openmusic = {
            type: "image",
            image: "https://gitee.com/z-l-ya/game-image/raw/master/images/icons/open.png",
            style: {
                backgroundColor: 'transparent',
                left: this.width * 2 / 3,
                top: this.modelY + this.size_1 * 4,
                width: this.iconSize * 2,
                height: this.iconSize
            },
            success(button) {
              _this.button.push(button);
              button.drawButton(_this.context); // 绘制按钮
              button.onTap((res) => {
                  button.destroy();
                  settings.MUSIC_OPEN = false;
                  pauseBackgroundMusic();
                  new CanvasButton(closemusic);
              })
          },
        };
        let closemusic = {
            type: "image",
            image: "https://gitee.com/z-l-ya/game-image/raw/master/images/icons/off.png",
            style: {
                backgroundColor: 'transparent',
                left: this.width * 2 / 3,
                top: this.modelY + this.size_1 * 4,
                width: this.iconSize * 2,
                height: this.iconSize
            },
            success(button) {
              _this.button.push(button);
              button.drawButton(_this.context); // 绘制按钮
              button.onTap((res) => {
                  button.destroy();
                  settings.MUSIC_OPEN = true;
                  playBackgroundMusic();
                  new CanvasButton(openmusic);
              })
          },
        };
        if(settings.MUSIC_OPEN === false) {
          new CanvasButton(closemusic)
        } else {
          new CanvasButton(openmusic);
        }
        let giveUpGame = {
            type: "text",
            text: "放弃游戏",
            style: {
                backgroundColor: 'blue',
                left: this.width / 4,
                top: this.height * this.percentage - this.size_1 * 3,
                width: this.width / 2,
                height: this.size_1,
                textAlign: 'center',
                fontSize: this.size_1 / 2,
                textColor: "white"
            },
            success(button) {
                _this.button.push(button);
                button.drawButton(_this.context); // 绘制按钮
                button.onTap((res) => {
                    _this.isAnimating = false;
                    _this.buttonDestroy();
                    _this.backHome();
                })
            },
        };
        new CanvasButton(giveUpGame);
        let continueGame = {
            type: "text",
            text: "继续游戏",
            style: {
                backgroundColor: 'blue',
                left: this.width / 4,
                top: this.height * this.percentage - this.size_1 * 5,
                width: this.width / 2,
                height: this.size_1,
                textAlign: 'center',
                fontSize: this.size_1 / 2,
                textColor: "white"
            },
            success(button) {
                _this.button.push(button);
                button.drawButton(_this.context); // 绘制按钮
                button.onTap((res) => {
                    _this.isAnimating = false;
                    _this.buttonDestroy();
                    _this.continueCallback();
                })
            },
        };
        new CanvasButton(continueGame);
        let contactService = {
            type: "text",
            text: "联系客服",
            style: {
                backgroundColor: 'blue',
                left: this.width / 4,
                top: this.height * this.percentage - this.size_1 * 7,
                width: this.width / 2,
                height: this.size_1,
                textAlign: 'center',
                fontSize: this.size_1 / 2,
                textColor: "white"
            },
            success(button) {
                _this.button.push(button);
                button.drawButton(_this.context); // 绘制按钮
                button.onTap((res) => {
                    _this.isAnimating = false;
                    wx.showModal({
                        title: "努力开发中噢~",
                        content: "敬请期待~"
                    });
                })
            },
        };
        new CanvasButton(contactService);
    }

    buttonDestroy() {
        this.button.forEach(bt => {
            bt.destroy();
        });
    }
}
